﻿<link href="/static/layui/css/layui.css" rel="stylesheet"/>
<script src="/static/layui/layui.js"></script>
<style>
    .content{
        margin:25px 3%;
        width:94%;
        border:1px solid #eee;
    }
    .content_right{
        /*line-height:38px;*/
        display: flex;
        align-items: center; /*定义body的元素垂直居中*/
        text-align: justify;
        justify-content: space-between;
        flex-grow: 1;
        /*height:100%;*/
        width:76%;float: left;
        padding:0px 2%;
    }
    .content_menu{
        width:100%;border-bottom:1px solid #eee;line-height:35px;
        display: flex;
    }
    .content_left{
        width:20%;display: inline-block;float: left;text-align: center;background-color: #e1efff;color: #2d8fff;
        display: flex;
        align-items: center; /*定义body的元素垂直居中*/
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        text-align: center;
        padding:3px;
    }

    .content_right img{width:45px;float: left;padding:15px 0px;}
</style>


<div class="content">

    {volist name="field" id="vo"}
        <div class="content_menu">
            <label class="content_left">{$vo.name}</label>
            <div class="content_right">

                {if condition="$vo.type eq 'image'"}
                    {volist name="$detail[$key]" id="v1"}
                        <img src="{$v1}" onclick="visitImg('{$v1}');">
                    {/volist}
                {else}
                    <p>{$detail[$key]}</p>
                {/if}

            </div>
        </div>
    {/volist}


</div>
<script>
    function visitImg(imgUrl) {
        layer.photos({
            photos : {
                "title" : "",
                "id" : 123,
                "start" : 0,
                "data" : [
                    {
                        "alt" : "",
                        "pid" : 666,
                        "src" : imgUrl,
                        "thumb" : ""
                    } ]
            }
        });
    }
    layui.use(['form','jquery','layer','laydate','table'], function() { //独立版的layer无需执行这一句


    });
</script>